<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客系统详情页面</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/blog_detail.css">
    <script src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="./editor.md/css/editormd.preview.min.css">
    <script src="./editor.md/editormd.js"></script>
    <script src="./editor.md/lib/marked.min.js"></script>
    <script src="./editor.md/lib/prettify.min.js"></script>
    <script src="./js/common.js"></script>

</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="./imag/logo.jpg" alt="博客图标">
        <span class="title">博客系统</span>
        <!-- 用于将图片 和 超链接分割开 -->
        <div class="splacer"></div>
        <a href="./blog_all_list.html">推荐文章</a>
        <a href="./blog_list.html">主页</a>
        <a href="./blog_add.html">写博客</a>
    </div>
    <!-- 页面的主体部分 -->
    <div class="container">
        <div class="container-left">
            <!-- 主要包括头像，文章信息等 -->
            <div class="card">
                <!-- 头像 -->
                <img src="./imag/头像.png" alt="用户头像">
                <!-- 用户名 -->
                <h3 id="username"></h3>
                <a href="https://gitee.com/little-bit-tang-chen">gitee 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>专栏</span>
                </div>
                <div class="counter">
                    <span id="artCount"></span>
                    <span>1</span>
                </div>
                <div class="newfunction">
                    <button id="button-attention">关注</button>
                    <a href="#">私信 ✉</a>
                </div>

            </div>
        </div>
        <!-- 文章的具体显示 -->
        <div class="container-detail-right">
            <!-- 文章的标题 -->
            <div class="title"></div>
            <!-- 文章的发布时间 -->
            <div class="date">
                发布时间：<span id="updatetime"></span>&nbsp;&nbsp;&nbsp;
                文章阅读量：<span id="rcount"></span>
            </div>
            <!-- 文章的内容 -->
            <div id="editor-Div">
            </div>
        </div>
        <!-- 点赞/踩按钮 -->
        <div class="like-btn-container">
            <div class="like-btn" id="like-btn" onclick="editlikeCount(getUrlArtId('id'))">
            </div>
            <div class="dislike-btn" id="dislike-btn" onclick="edittreadCount(getUrlArtId('id'))">
            </div>
        </div>
        <!-- 评论区 -->
        <div id="comment-window">
            <!-- 这里可以添加评论的相关内容 -->
            <div class="comment-list">
                <!-- 这里是一条完整的评论 -->
            </div>
            <div class="comment-form">
                <!-- 这里用于输入评论 -->
                <input type="text" id="comment-input" placeholder="发表评论...">
                <button id="send-button" onclick="sendComment()">发送</button>
            </div>
        </div>
</body>
<script type="text/javascript">
    // 将markdown文档变成html页面
    var editormd;
    function initEdit(md) {
        editormd = editormd.markdownToHTML("editor-Div", {
            markdown: md, // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    }

    // 在页面加载时，将点赞数量和踩数量加载进来
    function loadLikeCount(id) {
        jQuery.ajax({
            url: "/art/liketreadcount",
            type: "POST",
            data: { "aid": id },
            success: function (result) {
                // 根据里面的状态判断  可能没有这篇文章的点赞数量
                if (result != null && result.code == 200 && result.data == null) {
                    // 此时说明这篇文章并没有进行过任何的操作
                    jQuery("#like-btn").text('赞 ' + 0);
                    jQuery("#dislike-btn").text('踩 ' + 0);
                } else if (result.data != null && result.data.likestate == 0 && result.data.treadstate == 0) {
                    jQuery("#like-btn").text('赞 ' + result.data.likecount);
                    jQuery("#dislike-btn").text('踩 ' + result.data.treadcount);
                } else if (result.data != null && result.data.likestate == 1 && result.data.treadstate == 0) {
                    jQuery("#like-btn").text('不赞 ' + result.data.likecount);
                    jQuery("#dislike-btn").text('踩 ' + result.data.treadcount);
                }
                else if (result.data != null && result.data.likestate == 0 && result.data.treadstate == 1) {
                    jQuery("#like-btn").text('赞 ' + result.data.likecount);
                    jQuery("#dislike-btn").text('不踩 ' + result.data.treadcount);
                }
                else if (result.code == 0) {
                    if (confirm("当前用户未登录，不能获取该篇文章的点赞数量和踩数量，如果需要查看并进行点赞，请去登录")) {
                        location.href = "/blog_login.html";
                    }
                } else {
                    alert("获取文章点赞 + 踩数量失败，请重新刷新尝试获取!");
                }
            }
        });
    }

    loadLikeCount(getUrlArtId("id"));

    // console.log(getUrlArtId("id"));// 16

    // 根据文章id查询文章详情
    function getArtDetail(id) {
        if (id == "") {
            alert("非法参数!");
            return;
        }
        jQuery.ajax({
            url: "/art/detail",
            type: "POST",
            data: { "id": id },
            success: function (result) {
                if (result != null && result.code == 200) {
                    // 请求文章的详情信息成功
                    jQuery(".title").html(result.data.title);
                    jQuery("#updatetime").html(result.data.updatetime);
                    jQuery("#rcount").html(result.data.rcount);
                    // 显示文章的主要内容 mardown -> html
                    initEdit(result.data.content);
                    showUserInfo(result.data.uid);// 这里已经得到了文章的信息，其中包含用户的id
                } else {
                    alert("查询当前文章出错，请重新刷新页面获取文章!");
                }
            }
        });
    }
    getArtDetail(getUrlArtId("id"));

    // 根据用户的id获取到文章数量
    function showUserInfo(id) {
        jQuery.ajax({
            url: "/user/getuserbyid",
            type: "POST",
            data: { "id": id },
            success: function (result) {
                if (result != null && result.code == 200 && result.data.id > 0) {
                    // 从后端拿取数据
                    jQuery("#username").text(result.data.username);
                    jQuery("#artCount").text(result.data.artCount);
                } else {
                    alert("获取该文章的用户信息失败，请重新刷新!");
                }
            }
        });
    }

    // 根据文章的id实现访问量 + 1
    function artInCre(id) {
        jQuery.ajax({
            url: "/art/incre-rcount",
            type: "POST",
            data: { "id": id },
            success: function (result) {
                // 此时不需要后端返回数据
            }
        });
    }

    artInCre(getUrlArtId("id"));

    function editlikeCount(id) {
        if (id == "") {
            alert("非法参数!");
            return;
        }
        jQuery.ajax({
            url: "/art/editlikecount",
            type: "POST",
            data: { "aid": id },
            success: function (result) {
                if (result != null && result.code == 200 && result.data != null) {
                    jQuery("#like-btn").text('不赞 ' + result.data.likecount);
                } else if (result.code == 0) {
                    // 此时说明已经点赞过了，此时是取消点赞
                    jQuery("#like-btn").text('赞 ' + result.data.likecount);
                } else if (result.code == -1) {
                    // 表示当前用户未登录，不能点赞
                    if (confirm("当前用户未登录，确定去登录吗？")) {
                        location.href = "/blog_login.html";
                    }
                } else if (result.code == -2) {
                    // 此时代表在点击过踩的情况下，点击点赞
                    alert("该篇文章你已经踩过了，若想继续点赞，先取消踩!");
                    return;
                }
                else {
                    // 此时表示文章点赞失败
                    alert("文章点赞失败，请刷新页面后重新尝试点赞!");
                }
            }
        });
    }

    function edittreadCount(id) {
        if (id == "") {
            alert("非法参数!");
            return;
        }
        jQuery.ajax({
            url: "/art/edittreadcount",
            type: "POST",
            data: { "aid": id },
            success: function (result) {
                if (result != null && result.code == 200 && result.data != null) {
                    // 此时踩成功
                    jQuery("#dislike-btn").text('不踩 ' + result.data.treadcount);
                } else if (result.code == 0) {
                    // 此时说明已经点赞过了，此时是取消点赞
                    jQuery("#dislike-btn").text('踩 ' + result.data.treadcount);
                } else if (result.code == -1) {
                    // 表示当前用户未登录，不能点赞
                    if (confirm("当前用户未登录，确定去登录吗？")) {
                        location.href = "/blog_login.html";
                    }
                } else if (result.code == -2) {
                    // 此时代表在点击过踩的情况下，点击点赞
                    alert("该篇文章你已经点赞过了，若想继续踩，先取消点赞!");
                    return;
                } else {
                    // 此时表示文章点赞失败
                    alert("文章踩失败，请刷新页面后重新尝试踩!");
                }
            }
        });
    }

    // 评论功能
    function reqAllComment(aid) {
        let commentDiv = jQuery(".comment-list");
        jQuery.ajax({
            url: "/com/allcom",
            type: "POST",
            data: { "aid": aid },
            success: function (result) {
                if (result != null && result.code == 200 && result.data.length >= 0) {
                    // 进行拼接所有评论
                    let newComment = "";
                    for (let i = 0; i < result.data.length; i++) {
                        // 发布评论成功  构建一个一个的 评论 html 进行拼接
                        let comment = result.data[i]; //获取到一条评论数据
                        newComment += '<div class="other-comment-item">';
                        newComment += '<div class="comment-info">';
                        newComment += '<table>';
                        newComment += '<tr>';
                        newComment += '<td class="nickname">昵称:</td>';
                        newComment += '<td class="nickname">' + comment.nickname + '</td>';
                        newComment += '<td style="padding-left: 10px;">IP:</td>';
                        newComment += '<td class="ip">' + comment.ip + '</td>';
                        newComment += '<td style="padding-left: 10px;">时间:</td>';
                        newComment += '<td class="time">' + comment.ctime + '</td>';
                        newComment += '</tr>';
                        newComment += '</table>';
                        newComment += '</div>';
                        newComment += '<div class="comment-content">';
                        newComment += '<td>' + comment.content + '</td>';
                        newComment += '</div>';
                        newComment += '</div>';
                    }
                    commentDiv.html(newComment);
                } else {
                    alert("获取评论失败，请刷新重新获取评论!");
                }
            }
        });
    }

    reqAllComment(getUrlArtId("id"));//页面加载时，将所有的该篇文章的评论加载出来

    function sendComment() {
        let aid = getUrlArtId("id");//获取文章的id
        let content = jQuery("#comment-input");//获取评论的内容
        // 参数的非空校验
        if (aid == "") {
            alert("文章ID获取失败,非法参数!");
            return;
        }
        if (content.val() == "") {
            alert("请在评论输入框中输入一条评论!");
            content.focus();
            return;
        }
        jQuery.ajax({
            url: "/com/addcom",
            type: "POST",
            data: { "aid": aid, "content": content.val() },
            success: function (result) {
                if (result != null && result.code == 200 && result.data == 1) {
                    // 直接存储评论，刷新该页面即可
                    reqAllComment(getUrlArtId("id"));
                    content.val('');
                } else if (result.code == -1) {
                    if (confirm("该用户未登录，是否要跳转到登录界面?")) {
                        location.href = "/blog_login.html";
                    }
                } else {
                    alert("发布评论失败，请刷新页面重新尝试!");
                }
            }
        });
    }


</script>

</html>